<template>
  <div class="zone flex flex-col">
    <div class="head px-8 flex justify-between align-center">
      <div>个人中心</div>
      <div class="menu">
        <ul class="flex justify-center align-center h-100">
          <li
            :class="{ active: mode == key }"
            @click="mode = key"
            v-for="(item, key) in ['项目', '统计']"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>

    <div class="body px-8 flex-1 mt-8 pt-8 flex flex-col" v-if="mode == 0">
      <div class="flex align-center gc-4">
        <OrderedListOutlined />
        <div
          @click="changeTemplateMode(key)"
          :class="{ 'switch-active': index == key }"
          class="switch-item"
          v-for="(item, key) in ['我的项目', '模板项目']"
        >
          {{ item }}
        </div>
      </div>
      <ul
        class="program-list py-4 px-4 my-2 flex-1 flex flex-col gr-2"
        v-if="programList.length > 0"
      >
        <li v-for="item in programList" class="py-2 px-8 text-999" @click="selectItem(item)">
          {{ item.title }}
        </li>
      </ul>
      <div v-else class="flex flex-s mt-4">
        <InEmpty desc="项目为空" width="100" />
      </div>
    </div>

    <div class="body px-4 flex-1 mt-2 pt-2 flex flex-col" v-else>
      <div>
        <OrderedListOutlined />
        <span class="text-666 ml-4">统计信息</span>
      </div>
      <ul class="info-list py-4 px-4 my-2 flex-1 flex flex-col gr-2">
        <li class="flex flex-s">
          <InEmpty desc="正在开发中" />
        </li>
      </ul>
    </div>
  </div>
  <div class="display flex flex-s">暂时不支持大屏显示</div>
</template>

<script setup lang="ts">
import { previewUI } from "@/api/service/project";
import { userInfo } from "@/api/service/user";
import { projectMode } from "@/data/config";
import { templateList } from "@/data/templateList";
import { treeType } from "@/types/project";
import { uuid } from "@/utils/utils";
import { OrderedListOutlined } from "@ant-design/icons-vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import InEmpty from "../components/InEmpty.vue";
var route = useRoute();
const mode = ref(0);
const index = ref(0);

const changeTemplateMode = (flag: number) => {
  index.value = flag;
  if (flag % 2 == 0) {
    setUserInfo();
  } else {
    programList.value = templateList.value;
  }
};
const programList = ref<Array<any>>([]);
onMounted(() => {
  setUserInfo();
});

function setUserInfo() {
  var token = route.query.token as string;
  let params = {
    token
  };
  userInfo(params).then((res) => {
    if (!res.data) {
      programList.value = [];
    } else {
      let data = JSON.parse(res.data);
      programList.value = [data];
    }
  });
}

const selectItem = (item: treeType) => {
  console.log(item.data);
  previewUI({
    code: uuid().slice(0, 5),
    sourceData: item.data[0],
    viewMode: projectMode.viewMode,
    editMode: projectMode.editMode
  }).then((res: any) => {
    console.log(res.url);
    window.location.href = res.url;
  });
};
</script>

<style lang="scss" scoped>
.switch-item {
  width: 80px;
  text-align: center;
}
.switch-active {
  background-color: #222;
  color: white;
  padding: 0 8px;
  border-radius: 4px;
}
.body {
  background-color: white;
  .info-list {
    background-color: #f8f8f8;
    border-radius: 4px;
  }
  .program-list {
    background-color: #f8f8f8;
    li {
      border: 1px solid #eee;
    }
  }
}

.head {
  line-height: 42px;
  background-color: white;
  border-bottom: 1px solid #eee;
}
.menu {
  font-size: 12px;
  height: 24px;
  border: 1px solid #eee;
  left: 10vw;
  bottom: 20px;
  border-radius: 21px;
  color: black;
  width: 100px;
  overflow: hidden;
  li {
    text-align: center;
    border-radius: 12px;
    line-height: 24px;
    white-space: nowrap;
    flex: 1;
  }
  li.active {
    background-color: #222;
    color: white;
  }
}

/* ================================ */
@media screen and (max-width: 614px) {
  .display {
    display: none;
  }
}
@media screen and (min-width: 615px) {
  .zone {
    display: none;
  }
}

.zone,
.display {
  width: 100vw;
  height: 100vh;
}
.display {
  color: white;
}
.zone {
  background-color: #f8f8f8;
}
</style>
